<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            left: 0;
            top: 0;
        }


        p{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            left: 0;
            top: 350px;
        }
    </style>
</head>
<body>
    <div></div>


    <p></p>

    <script>
        // function move(ele,type,target,timer){
        //     var init = parseInt(window.getComputedStyle(ele)[type]);
        //     var t = setInterval(function(){
        //         init += (target/10);
        //         console.log(init);
        //         ele.style[type] = init + 'px';
        //         if(init>=target){
        //         // 停下来 
        //             clearInterval(t);
        //         }

        //     },timer);
        // }


        // var divele = document.querySelector('div');
        // divele.onclick = function(){
        //     alert('666')
        //     move(divele,'left',496,10)
        // }


        // 上面是匀速  


        // 下面是 减速  
        // 每次走剩余路程的10分之一  

        // function move(ele,type,target,timer){
        //     var init = parseInt(window.getComputedStyle(ele)[type]);
        
        //     var t = setInterval(function(){
        //         init += ((target-init) / 10 );
        //         // 这里 依然是 匀速 每次走的距离是固定的
        //         // init 固定  target 也是设置好的 
        //         console.log(init);
        //         ele.style[type] = init + 'px';
        //         if(init>=target){
        //         // 停下来 
        //             clearInterval(t);
        //         }

        //     },timer);
        // }

        function move(ele,type,target,timer){
           
        
            const t = setInterval(function(){
                let init = parseInt(window.getComputedStyle(ele)[type]);
                init += ((target-init) / 10 );
                // 这里 依然是 匀速 每次走的距离是固定的
                // init 固定  target 也是设置好的 
                console.log(init);
                ele.style[type] = init + 'px';
                if(init === target){
                // 停下来 
                    clearInterval(t);
                }

            },timer);
        }

        var divele = document.querySelector('div');
        divele.onclick = function(){
            move(divele,'left',496,10)
        }

        // 上面依然到达不了最终的目标 

        // 以 0 ~  100 
        // // 假设当前值 91
        // 本次运动距离 (100-91) / 10 0.9 
        // 给元素赋值  91.9px

        // (100-91.9) / 10  // 下次运动距离 0.81
        // 给元素赋值  92.71

        // (100-92.71) / 10  0.729


        
    </script>
</body>

</html>